<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <!-- <el-button
          :style="istxChange ? 'background-color: #409eff;color: white;' : ''"
          icon="el-icon-edit"
          size="mini"
          @click="getistxChange"
          type="info"
          >快捷编辑</el-button
        > -->
      </el-col>

      <!-- <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          
          >修改</el-button
        >
      </el-col> -->
    </el-row>
    <el-table
      :data="tableData"
      :span-method="objectSpanMethod"
      border
      :header-cell-style="{ textAlign: 'center', backgroundColor: '#F5F7FA' }"
    >
      <!-- <el-table-column type="selection" width="55" align="center" /> -->
      <el-table-column label="id" align="center" prop="id" />
      <el-table-column label="分配类型" align="center" prop="allocType" />
      <el-table-column label="商品类型" align="center" prop="productType" />
      <el-table-column label="商品编码" align="center" prop="productCode" />
      <el-table-column label="上架ID" align="center" prop="shelfId" />

      <el-table-column label="店铺" align="center" prop="storeName" />
      <el-table-column label="数量" align="center" prop="quantityCount" />
      <el-table-column label="退货比例" align="center" prop="ratio" />
      <el-table-column
        label="计算分配数量"
        align="center"
        prop="allAllocationCount"
      >
        <template slot-scope="scope">
          <el-input-number
            v-model="scope.row.allAllocationCount"
            placeholder="计算分配数量"
            v-if="istxChange === true"
          />
          <span v-else>{{ scope.row.allAllocationCount }}</span>
        </template>
      </el-table-column>
    </el-table>

    <div style="width: 100%; text-align: center">
      <el-button style="margin-top: 12px" @click="prev">上一步</el-button>
      <el-button style="margin-top: 12px" @click="next">关闭</el-button>
    </div>
  </div>
</template>

<script>
import {
  getShopReturnNumAndAndCalc,
  getShopReturnNumAndAndCalcList,
} from "@/api/productAllocation/BiProductReturnRestock";
import { abnormalTaskProcess } from "@/api/productAllocation/task";
export default {
  //   components: { KoiCardI },
  props: {
    row: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      istxChange: false,

      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 存放所有的表头 一定要与tableData一致
      colFields: [
        "id",
        "allocType",
        "productType",
        "productCode",
        "shelfId",
        "storeName",
        "quantityCount",
        "ratio",
        "allAllocationCount",
      ],
      spanArr: [], //存储合并单元格的开始位置
      tableData: [],
    };
  },
  watch: {
    row: {
      handler: function (newnew, oldold) {
        // console.log("newnew", newnew);
        if (this.row.length > 0) {
          this.getList();
        }
      },
      deep: true,
      immediate: true,
    },
  },
  mounted() {
    this.getSpanArr();
  },
  methods: {
    getList() {
      getShopReturnNumAndAndCalcList(this.row).then((response) => {
        response = [
          {
            id: "1",
            allocType: "ByOrder",
            productType: "Good",
            productCode: "TK269452M",
            shelfId: "4",

            storeName: "vfu运动旗舰店",
            quantityCount: "11",
            ratio: "0.9167",
            allAllocationCount: "1",
          },
          {
            id: "1",
            allocType: "ByOrder",
            productType: "Good",
            productCode: "TK269452M",
            shelfId: "4",

            storeName: "VFU-抖音小店",
            quantityCount: "1",
            ratio: "0.0833",
            allAllocationCount: "0",
          },
        ];
        this.tableData = response;
      });
    },

    getistxChange() {
      this.istxChange = !this.istxChange;
    },
    prev() {
      //   this.handleStatusChange();
      this.$emit("prev");
    },
    next() {
      // this.handleStatusChange();
      this.$emit("next");
    },
    handleStatusChange() {
      var list = [];
      this.tableData.forEach((item) => {
        list.push({
          storeName: item.storeName,
          storeItemQuantity: item.allAllocationCount,
        });
      });
      let obj = {
        ...this.row,
        shopsAllocatNumber: list,
      };
      abnormalTaskProcess(obj).then((response) => {
        if (response.code == 200) {
          this.$modal.msgSuccess("修改成功");
          this.istxChange = false;
          this.getList();
        }
      });
    },
    /**
     * 分析每一列，找出相同的
     * @param data
     */
    getSpanArr() {
      for (let i = 0; i < this.tableData.length; i++) {
        let row = i;
        // let col = i % this.colCount;
        if (row === 0) {
          // i 表示行 j表示列
          for (let j = 0; j < this.colFields.length; j++) {
            this.spanArr[i * this.colFields.length + j] = {
              rowspan: 1,
              colspan: 1,
            };
          }
        } else {
          for (let j = 0; j < this.colFields.length; j++) {
            // 当前和上一次的一样
            //  合并所有列的相同数据单元格
            if (
              this.colFields[j] == "id" ||
              this.colFields[j] == "allocType" ||
              this.colFields[j] == "productType" ||
              this.colFields[j] == "productCode" ||
              this.colFields[j] == "shelfId"
            ) {
              // 指定合并哪些列
              if (this.tableData[row]["id"] !== this.tableData[row - 1]["id"]) {
                // 哪些不合并:School不一样的,不合并
                this.spanArr[row * this.colFields.length + j] = {
                  rowspan: 1,
                  colspan: 1,
                };
              } else if (
                this.tableData[row][this.colFields[j]] ===
                this.tableData[row - 1][this.colFields[j]]
              ) {
                let beforeItem =
                  this.spanArr[(row - 1) * this.colFields.length + j];
                this.spanArr[row * this.colFields.length + j] = {
                  rowspan: 1 + beforeItem.rowspan, // 合并几列
                  colspan: 1, // 合并几行
                };
                beforeItem.rowspan = 0;
                beforeItem.colspan = 0;
              } else {
                // rowspan 和 colspan 都为1表格此单元格不合并
                this.spanArr[row * this.colFields.length + j] = {
                  rowspan: 1,
                  colspan: 1,
                };
              }
            }
          }
        }
      }
      // 对数据进行倒序
      let stack = [];
      for (let i = 0; i < this.colFields.length; i++) {
        for (let j = 0; j < this.tableData.length; j++) {
          // console.log("i=" + i + " j=" + j);
          // i 表示列 j表示行
          if (j === 0) {
            if (this.spanArr[j * this.colFields.length + i].rowspan === 0) {
              stack.push(this.spanArr[j * this.colFields.length + i]);
            }
          } else {
            if (this.spanArr[j * this.colFields.length + i].rowspan === 0) {
              stack.push(this.spanArr[j * this.colFields.length + i]);
            } else {
              stack.push(this.spanArr[j * this.colFields.length + i]);
              while (stack.length > 0) {
                let pop = stack.pop();
                let len = stack.length;
                this.spanArr[(j - len) * this.colFields.length + i] = pop;
              }
            }
          }
        }
      }
      // console.log(this.spanArr);
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // console.log(this.spanArr[rowIndex * this.colFields.length + columnIndex]);
      return this.spanArr[rowIndex * this.colFields.length + columnIndex];
    },
  },
};
</script>

<style>
</style>
String storeName;   //店铺名字
    long quantityCount;   //退货总数量
    Double ratio;         //退货比例
    long allAllocationCount;//计算分配数量